this['head'] = (function(){
    $('document').ready(function(){
        let user = hasLogin()
        render()

        if(user){ //检查是否登录
            let username = user.username
            //隐藏
            $('.login').hide()
            $('.register').hide()
    
            //显示用户名和注销信息
            $('.userInfoBox').append(`
                <span>Hi ${username}</span>
                <span class="outlogin">注销</span>
            `)
        }
    
        
        initEven()
    })
    
    function initEven(){
        
        //退出登录
        $('.outlogin').click(function(){
            removeSession('user')
    
            window.location.reload()
        })

        $('.mine').hover(function(){
            $('.mine .mineMore').show();
        },function(){
            let late = false

            $('.mineMore').hover(function(){
                $('.mine .mineMore').show()
                late = true
            }, function(){
                $('.mine .mineMore').hide()
            })

            setTimeout(function(){
                if(!late)
                    $('.mine .mineMore').hide()
            },500)
        });


    }
    
    function render(){
        $('.head').html(`
            <div class="userInfoBox">
                <a href="login.html" class="login">登录</a>
                <a href="register.html" class="register">注册</a>
            </div>
        `)


        $('.nav_head').html(`
            <span>
                <a href="./index.html">首页</a>
            </span>
            <span>
                <a href="./pet_kinds.html">宠物</a>
            </span>

            <span class="mine">
                <a href="./mine.html">个人中心</a>
                <ul class="mineMore">
                    <li><a href="./recharge.html">充值中心</a></li>
                    <li><a  href="./car.html">购物车</a></li>
                    <li><a href="./orders.html">我的订单</a></li>
                </ul>
            </span>
        `)
    }
    
})();